﻿<!DOCTYPE html>
<html class="not-ie" lang="zh">
<!--<![endif]-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>缓存开发信息</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="~/vue/vue.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="~/axios/axios.min.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0" />
</head>

<body style="background-color:#808080;margin:0;">
    <div id="cache_info" style="background-color:white; padding:10px 8px 0 8px;">
        <el-form :inline="true" size="small">
            <el-form-item label="缓存类型">
                <el-select v-model="filter.cacherType" clearable>
                    <el-option value="0" label="缓存结果"></el-option>
                    <el-option value="1" label="清除缓存"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="方法名称">
                <el-input v-model="filter.methodName" clearable></el-input>
            </el-form-item>
            <el-form-item label="Id(key)">
                <el-input v-model="filter.id" clearable></el-input>
            </el-form-item>
            <el-form-item label="清除目标Id(key)">
                <el-input v-model="filter.targetId" clearable></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="filter.methodComment" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @@click="get_cache_info">刷新</el-button>
                <el-button @@click="reset_filter" type="danger">重置</el-button>
            </el-form-item>
        </el-form>
        <el-card v-for="cache_info in cache_info_items" style="width:31%;margin: 5px 1% 5px 1%;float:left;">
            <div slot="header">
                {{cache_info.methodComment || "无备注"}}
            </div>
            <div>
                <p>
                    <el-link type="primary" @@click="filter_by_method_name(cache_info.methodName)">{{cache_info.methodName}}</el-link>
                </p>
                <el-tag type="primary" v-if="cache_info.cacher.cacherType == 0">缓存结果</el-tag>
                <el-tag type="danger" v-if="cache_info.cacher.cacherType == 1">清除缓存</el-tag>

                <p v-if="cache_info.cacher.cacherType == 0">
                    缓存Id(Key):{{cache_info.cacher.id || cache_info.cacher.methodName}}
                </p>
                <p v-if="cache_info.cacher.cacherType == 1">
                    清除目标:{{cache_info.cacher.targetId || cache_info.cacher.methodName}}
                </p>
                <div>
                    <el-button v-if="cache_info.cacher.cacherType == 0"
                               type="danger" size="small" @@click="find_clean_cache_method(cache_info.cacher.id || cache_info.cacher.methodName)">查找清除缓存处</el-button>
                    <el-button v-if="cache_info.cacher.cacherType == 1"
                               type="primary" size="small" @@click="find_cache_method(cache_info.cacher.targetId || cache_info.cacher.methodName)">查找缓存处方法</el-button>
                </div>
            </div>
        </el-card>
    </div>

    <script>
        new Vue({
            el: '#cache_info',

            data: {
                cache_info_list: [],
                filter: {
                    methodName: '',
                    id: '',
                    targetId: '',
                    cacherType: null,
                    methodComment: ''
                }
            },

            computed: {
                cache_info_items() {
                    let results = this.cache_info_list;
                    if (this.filter.methodName)
                        results = results.filter(item => item.methodName.indexOf(this.filter.methodName) > -1)
                    if (this.filter.id)
                        results = results.filter(item => item.cacher.id && item.cacher.id.indexOf(this.filter.id) > -1)
                    if (this.filter.targetId)
                        results = results.filter(item => item.cacher.targetId && item.cacher.targetId.indexOf(this.filter.targetId) > -1)
                    if (this.filter.cacherType)
                        results = results.filter(item => item.cacher.cacherType == this.filter.cacherType)
                    if (this.filter.methodComment)
                        results = results.filter(item => item.cacher.methodComment && item.cacher.methodComment.indexOf(this.filter.methodComment) > -1)
                    return results;
                }
            },

            methods: {
                get_cache_info() {
                    const options = { url: '/home/cacheInfo', method: 'post' };
                    const vm = this;
                    axios(options).then(res => {
                        vm.cache_info_list = res.data.result
                        vm.cache_info_items = res.data.result
                    })
                },

                filter_by_method_name(methodName) {
                    this.filter.methodName = methodName;
                },

                reset_filter() {
                    this.filter = {
                        methodName: '',
                        id: '',
                        targetId: '',
                        cacherType: null,
                        methodComment: ''
                    }
                },

                find_cache_method(targetId) {
                    this.reset_filter();
                    this.filter.id = targetId;
                },

                find_clean_cache_method(id) {
                    this.reset_filter();
                    this.filter.targetId = id;
                }
            },
            created() {
                this.get_cache_info()
            }
        })
    </script>
</body>
</html>